<template>
    <div class="new-footer">
        <div class="new-footer-content">
            <div class="footer-hd-con">
                <div class="footer-hd">
                    <ul class="footer-type-tab">
                        <li @click="selectClick(index)" :class="active == index ? 'active' : ''"
                            v-for="(item, index) in footerNavArr" :key="index">{{ item.title }}</li>
                    </ul>
                    <ul class="type-content-list" style="display:flex;">
                        <li v-for="(child, child_key) in footerNavArr[active]['children']" :key="child_key"
                            v-if="footerNavArr[active]"><a :href="child.url" target="_blank">{{ child.title }}</a> </li>
                    </ul>

                </div>
            </div>
            <div class="footer-bd">
                <div class="bd-left">
                    <ul v-for="(item1, index1) in footerOtherNavArr" :key="index1">
                        <li>{{ item1['title'] }}</li>
                        <li v-if="item1['children']" v-for="(item2, index2) in item1['children']" :key="index2"> <a
                                :href="item2['url']" target="_blank">{{ item2.title }}</a></li>
                    </ul>

                </div>
                <div class="bd-right">
                    <div class="official-account">
                        <div class="official-account-img">
                            <img :src="siteConf.wx_img"
                                style="width: 100px;height: 100px;border-radius: 4px; margin-bottom: 12px;">
                        </div>
                        <div>微信公众号</div>
                    </div>
                    <div class="small-routine">
                        <div class="small-routine-img">
                            <img :src="siteConf.wx_img"
                                style="width: 100px;height: 100px;border-radius: 4px; margin-bottom: 12px;">
                        </div>
                        <div>小程序</div>
                    </div>
                </div>
            </div>
            <div class="line"></div>
            <div class="copyright">
                <p>{{ siteConf.sm }}</p>
                <p>Copyright © 2010 - 2023 All rights reserved. KM ©版权所有 <a
                        href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
                        rel="nofollow">{{ siteConf.record_number }} </a> KM 有限公司</p>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getFooterNav,getFooterOtherNav } from "../api/home/index";
const active = ref(0)
import { useSiteConfig } from '../stores/siteConfig'
const siteConf = useSiteConfig()
const selectClick = (index: any) => {
    active.value = index
}

//获取底部导航数据
const footerNavArr = ref([]);
const getFooterNavList = () => {
    getFooterNav().then((res) => {
        if (res.code === 1) {
            footerNavArr.value = res.data.list;
        }
    });
}

//获取底部导航数据
const footerOtherNavArr = ref([])
//获取其他导航数据
const getFooterOtherNavList = () => {
    getFooterOtherNav().then((res) => {
        if (res.code === 1) {
            footerOtherNavArr.value = res.data.list;
        }
    });
}
onMounted(() => {
    getFooterNavList()
    getFooterOtherNavList()
})
</script>